<html>
 <head>
 <title>AtD/jQuery Demo - Don't Mess!</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <!-- 0. do yourself a favor and make CSS that applies to both the textarea and div -->
 <style>

 .input
 {
    font-size: 100%;
    width: 400px;
    height: 200px;
    font-family: times;
    border: 1px solid black;
    padding: 2px;
    margin: 2px;
 }

 </style>

 <!-- there are six things you need to make AtD work for you, they are: -->

 <!-- 1. include jQuery ... naturally none of this works without jQuery -->
 <script src="http://code.jquery.com/jquery-1.4.2.js"></script>

 <!-- 2. load the atd.textarea.js -- this script makes it easy to attach AtD to a textarea -->
 <script src="scripts/jquery.atd.textarea.js"></script>

 <!-- 3. this script is a hack that allows cross-domain AJAX -->
 <script src="scripts/csshttprequest.js"></script>

 <!-- 4. this CSS file contains the style information for highlighted errors -->
 <link rel="stylesheet" type="text/css" media="screen" href="css/atd.css" />

 <!-- 6. a function to call when the button is clicked, this function calls into the AtD textarea code -->
 <script>
 function check()
 {
    AtD.checkTextAreaCrossAJAX('textInput', 'checkLink', 'Edit Text');
 }
 </script>

 </head>
 <body>
 <p>This demo demonstrates how to use <a href="http://www.afterthedeadline.com">AtD</a> to check spelling and grammar in a textarea.</p>

 <textarea id="textInput" class="input">The purpoce of a spell checker is to check the text four spelling and typeing errors. The checker finds errors througout the text. 

When the spell checker finds an questionable word, it highlights it and suggests the mpst likely variants too replace the questionable word. You can select the variant and replace the wrrd or leave the word unanged.</textarea>

 <p><img src="images/atdbuttontr.gif"><a href="javascript:check()" id="checkLink">Check Spelling</a></p>

 </body>
</html>
